<template>
  <div class="main">
    <div class="search flex flex-wrap flex-align-items-center">
      <div class="search-item flex flex-align-items-center">
        <p class="search-item-label font-14">创建时间：</p>
        <el-date-picker v-model="searchForm.time" type="daterange" start-placeholder="开始" end-placeholder="结束"
          format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
      </div>
      <div class="search-item flex flex-align-items-center">
        <p class="search-item-label font-14">产品名称：</p>
        <el-input v-model="searchForm.keyword" placeholder="产品名称"></el-input>
      </div>
      <div class="search-btns flex">
        <p class="font-14 pointer" @click="searchConfirm">查询</p>
        <p class="font-14 pointer" @click="reset">重置</p>
      </div>
    </div>
    <div class="btns flex">
      <p class="pointer font-14" @click="editProInfoShowChange(null)">新建产品</p>
      <p class="pointer font-14" @click="independentProShow = true">添加独立站商品</p>
    </div>
    <el-table :data="tableData" :height="tableHeight" style="width: 100%;" class="table">
      <el-table-column prop="createdAt" label="创建时间" width="180" />
      <el-table-column label="产品主图" width="120">
        <template #default="scope">
          <img :src="scope.row.pic" class="row-img">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="产品名称" width="150" />
      <el-table-column label="产品类型" width="100">
        <template #default="scope">
          <p class="font-14">{{ data.proTypeList.find(item => item.value === scope.row.type).name }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="platformName" label="平台" width="150" />
      <el-table-column prop="cooperateInfluencerNum" label="合作红人数" width="100" />
      <el-table-column prop="shortLinkNum" label="产品短链接数" width="110" />
      <el-table-column label="链接访问量" width="100">
        <template #default="scope">
          <p class="font-14">{{ numConvert(scope.row.linkVisitNum, 2) }}</p>
        </template>
      </el-table-column>
      <el-table-column label="视频播放量" width="100">
        <template #default="scope">
          <p class="font-14">{{ numConvert(scope.row.videoPlayNum, 2) }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="124" fixed="right">
        <template #default="scope">
          <div class="row-btns flex flex-align-items-center">
            <p class="row-btn font-14 pointer" @click="toDetail(scope.row)">详情</p>
            <span class="line"></span>
            <el-dropdown :hide-on-click="false" trigger="click">
              <p class="row-btn font-14 pointer flex flex-align-items-center">更多
                <i class="iconfont icon-arrow-down"></i>
              </p>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <span class="font-14 pointer" @click="editProInfoShowChange(scope.row)">编辑</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span class="font-14 pointer" @click="sharePopupInfoShowChange(scope.row)">共享</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span class="font-14 pointer" @click="delTableItem(scope.row)">删除</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination flex">
      <el-pagination layout="prev, pager, next, total" :total="form.total" @current-change="currentChange" />
    </div>
  </div>

  <edit-pro v-if="editProInfo.show" :id="editProInfo.id" @close="editProInfo.show = false" @change="proChange"></edit-pro>

  <share-popup v-if="sharePopupInfo.show" :info="editProInfo" @close="sharePopupInfo.show = false"></share-popup>

  <independent-pro v-if="independentProShow" @close="independentProShow = false"></independent-pro>
</template>

<script setup>
import EditPro from './components/editPro.vue';
import SharePopup from './components/sharePopup.vue';
import IndependentPro from './components/independentPro.vue';
import { ref, onMounted } from 'vue';
import api from '@/api/index';
import numConvert from '@/js/numConvert';
import data from '@/js/data';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const searchForm = ref({
  time: []
});
const form = ref({
  page: 1,
  perPage: 10,
  time: []
});
const tableHeight = ref(window.innerHeight - 289);
const tableData = ref([]);
const editProInfo = ref({
  show: false
});
const sharePopupInfo = ref({
  show: false
});
const independentProShow = ref(false);

const queryProductList = () => {
  const params = {
    page: form.value.page,
    perPage: form.value.perPage,
    keyword: form.value.keyword,
    startDate: form.value.time[0],
    endDate: form.value.time[1]
  }
  api.pro.queryProductList(params).then(res => {
    tableData.value = res.list;
    form.value.total = res.page.total;
  });
}
const searchConfirm = () => {
  form.value = {
    page: 1,
    perPage: form.value.perPage,
    ...searchForm.value
  }
  queryProductList();
}
const reset = () => {
  form.value = {
    page: 1,
    perPage: form.value.perPage,
    time: []
  };
  searchForm.value = {
    time: []
  };
  queryProductList();
}
const currentChange = e => {
  form.value.page = e;
  queryProductList();
}
const proChange = () => {
  form.value.page = 1;
  editProInfo.value.show = false;
  queryProductList();
}
const delTableItem = e => {
  console.log(e)
  ElMessageBox.confirm(
    `确定删除？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      api.pro.delProduct({ productId: e.productId}).then(() => {
        ElMessage.success('删除成功');
        proChange();
      }).catch(err => {
        ElMessage.error(err.msg);
      });
    })
    .catch(() => {
    })
}
const editProInfoShowChange = e => {
  if (e) {
    editProInfo.value = {
      show: true,
      id: e.productId
    }
  } else {
    editProInfo.value = {
      show: true
    }
  }
}
const sharePopupInfoShowChange = e => {
  if (e) {
    sharePopupInfo.value = {
      show: true,
      ...e
    }
  } else {
    sharePopupInfo.value = {
      show: true
    }
  }
}
const toDetail = e => {
  router.push(`/proDetail?id=${e.productId}`);
}

onMounted(() => {
  queryProductList();
});
</script>

<style lang="less" scoped>
.main {
  margin: 16px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
  padding: 16px;
}

.search {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f2f3f5;

  .search-item {
    margin-right: 32px;

    .search-item-label {
      color: #333;
      width: 80px;
    }

    &::v-deep {
      .el-date-editor {
        width: 282px;
        flex-grow: 0;
      }

      .el-input {
        width: 282px;
      }
    }
  }

  .search-btns {
    p {
      width: 70px;
      padding: 0 8px;
      height: 32px;
      border-radius: 2px;
      text-align: center;

      &:first-child {
        background: @main-color !important;
        color: #fff;
        margin-right: 24px;
        line-height: 32px;
      }

      &:last-child {
        background: #fff;
        border: 1px solid #d9d9d9;
        color: #333;
        line-height: 30px;
      }
    }
  }
}

.btns {
  margin-bottom: 16px;

  p {
    min-width: 70px;
    padding: 0 8px;
    height: 32px;
    border-radius: 2px;
    text-align: center;

    &:first-child {
      line-height: 32px;
      background: @main-color !important;
      color: #fff;
      margin-right: 16px;
    }

    &:last-child {
      border: 1px solid #d9d9d9;
      color: #333;
      line-height: 30px;
    }
  }
}

.table {
  .row-img {
    width: 114px;
    height: 56px;
  }
}

.pagination {
  justify-content: end;
  margin-top: 16px;
}
</style>
